<template>
  <div class='home-page'>
    <p class='title'>点击相机拍照</p>
    <img src="/static/img/camera.png" alt="" mode='widthFix' class='camera' @click='navToCamera'>
    <p class='slogan'>
      专业医美机构咨询平台
    </p>
    <span class='btn' @click='navToComment'>
      <i class='text'>
        查看回复
        <img src="/static/img/btn_icon.png" alt="" class='btn_icon' mode='widthFix'>
      </i>
    </span>
  </div>
</template>

<script>
// 欢迎页
import {mapMutations, mapState} from 'vuex'
import {STE_OPEN_ID, SET_USER_INFO} from '../../store/mutation-types'
export default {
  name: 'Home',
  data () {
    return {
    }
  },
  computed: {
    ...mapState([
      'openId', 'userInfo'
    ])
  },
  methods: {
    ...mapMutations([
      STE_OPEN_ID, SET_USER_INFO
    ]),
    navToComment () {
      wx.navigateTo({
        url: '/pages/comment/comment'
      })
    },
    navToCamera () {
      wx.navigateTo({
        url: '/pages/camera/camera'
        // url: '/pages/edit/edit'
      })
    },
    getLogin () {
      const _this = this
      wx.login({
        success (res) {
          if (res.code) {
            _this.$http.get(`/wapp/config/${res.code}`).then(res => {
              if (res.data && res.data.data && res.data.data[0]) {
                _this[STE_OPEN_ID](res.data.data[0])
              }
            })
          } else {
            console.log('获取用户登录态失败！' + res.errMsg)
          }
        },
        fail (err) {
          console.dir(err)
        }
      })
    },
    getUserInfo () {
      const _this = this
      wx.getUserInfo({
        success (res) {
          _this[SET_USER_INFO](res.userInfo)
        }
      })
    }
  },
  mounted () { // 获取用户的openid和userInfo
    if (!this.openId) {
      this.getLogin()
    }
    if (!this.userInfo) {
      this.getUserInfo()
    }
  }
}
</script>

<style scoped lang='less'>
.home-page{
  text-align:center;
  height:100vh;
  background:#EE5DC0;
  color:#fff;
  font-size:34rpx;
  .title{
    text-align:center;
  }
  .camera{
    width:540rpx;
  }
  .slogan{
    margin-top:160rpx;
  }
  .btn{
    // display:flex;
    // justify-content: center;
    // align-items: center;
    display: inline-block;
    margin-top:220rpx;
    padding:20rpx 55rpx;
    border:1px solid #fff;
    width:200rpx;
    text-align: center;
    border-radius: 40rpx;
    position: relative;
    .text{
      .btn_icon{
        width:40rpx;
      }
    }
  }
}
</style>
